<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20210902124邵文杰</title>
    <style>
        .slider {
            position: relative;
           
            overflow: hidden;
            height: 600px;
            width: 900px;
            margin: 0 auto;
        }
        .slider img {
            display: none;
           
            height: 600px;
            width: 900px;
        }
        .controls {
            width: 900px;
            position: absolute;
            bottom: 0px;
            right: 0px;
            background-color:#76726c
        }
        .controls2{
            margin-left: 80%;
        }
        .slide-number {
            display: inline-block;
            margin: 0 5px;
            cursor: pointer;
        }
        
    </style>
</head>
<body>

<div class="slider">
    <img src="/实验三/image/1.jpg" alt="Image 1">
    <img src="/实验三/image/2.jpg" alt="Image 2">
    <img src="/实验三/image/3.jpg" alt="Image 3">
    
    <div class="controls">
        <div class="controls2">
            <button onclick="prevSlide()">&lt;</button>
            <span class="slide-number" onclick="goToSlide(0)">1</span>
            <span class="slide-number" onclick="goToSlide(1)">2</span>
            <span class="slide-number" onclick="goToSlide(2)">3</span>
            <button onclick="nextSlide()">&gt;</button>
        </div>
        
    </div>
</div>

<script>
    let currentSlide = 0;
    const totalSlides = document.querySelectorAll('.slider img').length;
    const slideNumbers = document.querySelectorAll('.slide-number');

    function showSlide(slideIndex) {
        document.querySelectorAll('.slider img').forEach((img, index) => {
            if (index === slideIndex) {
                img.style.display = 'block';
            } else {
                img.style.display = 'none';
            }
        });
        slideNumbers.forEach((number, index) => {
            if (index === slideIndex) {
                number.style.color = '#ff6700';
            } else {
                number.style.color = '#fff';
            }
        });
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
        showSlide(currentSlide);
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
        showSlide(currentSlide);
    }

    function goToSlide(index) {
        showSlide(index);
        currentSlide = index;
    }

    showSlide(currentSlide); 
</script>
</body>
</html>
